<template>
    <div class="jianzhan-content">
        <Crumb name="Stock"/>
        <Search>
            <el-input v-model="partsNumber" placeholder="Part No" size="small" class="input"></el-input>
            <el-input v-model="denomination" placeholder="Part Name" size="small" class="input"></el-input>
            <el-button type="text" size="small" @click="search"  >Search</el-button>
        </Search>
        <div class="content">
            <div class="table-wrapper">
                <el-table
                        :data="stockList"
                        border
                        stripe
                        row-key="partsId"
                        style="width: 100%">
                    <el-table-column
                            prop="partsNumber"
                            label="Part "
                            >
                    </el-table-column>

                    <el-table-column
                            prop="partsNumber"
                            label="Part Name"
                           >
                        <template slot-scope="scope">
                            <span>{{scope.row.designation}}/{{scope.row.denomination}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            sortable
                            prop="stockQuantity"
                            label="Warehouse2 Stock">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="stockQuantityThree"
                            label="Warehouse3 Stock">
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                            background
                            :page-size="pageSize"
                            layout="prev, pager, next"
                            @current-change="changePage"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import {showStock23} from "../../api/service";
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";
    export default {
        name: "part-stock",
        components:{
            Crumb,Search
        },
        mixins:[mixins],
        data() {
            return {
                partsNumber: '',
                denomination: '',
                stockList:[]
            }
        },

        created(){
            this.getStock()
        },
        methods: {
            changePage(page){
                this.pageNum = page;
                this.getStock()
            },
            search(){
                this.pageNum = 1;
                this.getStock();
            },
            async getStock() {
                const {
                    partsNumber,denomination,pageNum,pageSize
                } = this;
                const {status,data} = await showStock23({
                        partsNumber,
                        denomination,
                        pageNum,
                        pageSize
                });
                if (status === ERROR_OK) {
                    this.stockList = data.list;
                    this.total = data.total
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content{
        @include content;

    }


</style>